<template>
  <div>
    <el-dialog title="配送员申请" v-model="senderDialog">
      <el-form :model="form" label-width="120px">
        <el-form-item label="手机号码">
          <el-input
            placeholder="请填写手机号码"
            :maxLength="20"
            v-model="shopEInfo.phone"
          />
        </el-form-item>

        <el-form-item label="身份证照片">
          <el-upload
            v-model:file-list="shopEInfo.ICCARDIMG"
            action="/api/upload/img"
            :headers="tokenBody"
            list-type="picture-card"
            :on-remove="handleRemoveIdcard"
            :on-success="hanleSuccessIdcard"
            limit="1"
            ><el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="营业执照">
          <el-upload
            v-model:file-list="shopEInfo.StudentCopyImg"
            action="/api/upload/img"
            :headers="tokenBody"
            list-type="picture-card"
            :on-remove="handleRemoveStudent"
            :on-success="hanleSuccessStudent"
            limit="1"
            ><el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="senderDialog = false">取消</el-button>
          <el-button type="primary" @click="applySenderShip">申请</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <span>店铺审核结果</span>
        </div>
      </template>
      <div style="font-size: 22px">
        当前店铺的状态：{{
          state == 0
            ? "没有审核过"
            : state == 1
            ? "正在审核"
            : state == 2
            ? "审核未通过"
            : state == 3
            ? "审核已通过"
            : "删除"
        }}
      </div>
      <div class="refuse_state">
        <el-button type="success" @click="getShopInfo">立即更新状态</el-button>
      </div>

      <template #footer>
        <el-button
          type="primary"
          :disabled="state == 1 || state == 3"
          @click="Apply"
          plain
        >
          {{
            state == 0
              ? "立即审核"
              : state == 1
              ? "待审核中"
              : state == 2
              ? "再次审核"
              : state == 3
              ? "审核已通过"
              : "审核异常"
          }}</el-button
        >
      </template>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ElMessage, UploadFile } from "element-plus";
import { ref, reactive } from "vue";
const shopId = ref("");
const token = localStorage.getItem("doctor-auth-token");
const state = ref(0);
import type { UploadProps, UploadUserFile } from "element-plus";
const tokenBody = ref({
  token: token,
});
const senderDialog = ref(false);
const shopEInfo = reactive({
  iccardImg: "",
  ICCARDIMG: ref<UploadUserFile[]>([]),
  businessLicense: "",
  BUSINESSLICENSE: ref<UploadUserFile[]>([]),
  phone: "",
});

//身份证移除
const handleRemoveIdcard: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  shopEInfo.ICCARDIMG = [];
};

//身份证添加
const hanleSuccessIdcard: UploadProps["onSuccess"] = (res) => {
  const url = res.message;
  shopEInfo.ICCARDIMG = [];
  shopEInfo.ICCARDIMG.push({
    name: "hhe",
    url: res.message,
  });
  shopEInfo.iccardImg = res.message;
};

//学生证移除
const handleRemoveStudent: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  shopEInfo.BUSINESSLICENSE = [];
};
const hanleSuccessStudent: UploadProps["onSuccess"] = (res) => {
  const url = res.message;
  shopEInfo.BUSINESSLICENSE = [];
  shopEInfo.BUSINESSLICENSE.push({
    name: "hhe",
    url: res.message,
  });
  shopEInfo.businessLicense = res.message;
};

const Apply = () => {
  senderDialog.value = true;
};

const applySenderShip = () => {
  const req = {
    shopId: shopId.value,
    idcardImg: shopEInfo.iccardImg,
    businessLicense: shopEInfo.businessLicense,
    phone: shopEInfo.phone,
  };
  axios
    .post("/api/examineShop/apply", req, {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      // console.log("code line-155 \n\r😊 res:\n\r", res);
      if (res.data.success) {
        ElMessage({
          type: "success",
          message: "审核信息更改成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.data.message,
        });
      }
    })
    .catch((err) => {});

  axios
    .get("/api/shop/update/state/" + shopId.value + "/1", {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      // console.log(res);
      if (res.data.success) {
        ElMessage({
          type: "success",
          message: "申请成功，耐心等待管理员审核",
        });
      } else {
        ElMessage({
          type: "error",
          message: "申请失败",
        });
      }
      getShopInfo();
    })
    .catch((err) => {
      console.log(err);
    });

  senderDialog.value = false;
};

const getShopInfo = () => {
  axios
    .get("/api/shop/info", {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      // console.log(res);
      const msg = res.data.message;
      state.value = msg.shopState;
      shopId.value = msg.shopId;
    })
    .catch((err) => {
      console.log(err);
    });
};
getShopInfo();
setInterval(getShopInfo, 5000);
</script>

<style lang="scss" scoped>
.header {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.refuse_state {
  width: 100%;
  display: flex;
  justify-content: end;
}
.insert {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
